<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style media="screen" chartset="utf-8">
        /*$width: 300px;*/
        div.border{
            display: inline-block;
            width: 300px;
            height: 300px;
            padding: 0;
            overflow: hidden;
            position: relative;
            z-index: 1000;
            border-radius: 50%;
        }
        div.border::before{
            display: inline-block;
            content: ' ';
            width: 300px;
            height: 140px;
            background: #FFF;
            margin: 0;
            padding: 0;
            z-index: 1110;
            border-radius: 150px 150px 0 0 ;
            position: absolute;

            transform-origin: 150px 150px;

            -webkit-transform: rotate(55deg);
            -moz-transform: rotate(55deg);
            -ms-transform: rotate(55deg);
            -o-transform: rotate(55deg);
            transform: rotate(55deg);
        }

        div#quick-start-btn{
            display: inline-block;
            width: 20%;
            height: auto;
            margin: 0;
            padding-top: 2%;
            cursor: pointer;
            border-radius: 50%;
            z-index: 1120;
            position: absolute;
            top: 45%;
            left: 40%;
            text-align: center;
            font-size: 110%;
        }


        div.content{
            display: inline-block;
            width: 300px;
            height: 300px;
            margin: 0;
            padding: 0;
            z-index: 1100;
            border-radius: 50%;
            position: relative;

            -webkit-transition: transform 2s ease-out;
            -moz-transition: transform 2s ease-out ;
            -ms-transition: transform 2s ease-out ;
            -o-transition: transform 2s ease-out ;
            transition: transform 2s ease-out ;

            -webkit-transform: rotate(140deg);
            -moz-transform: rotate(140deg);
            -ms-transform: rotate(140deg);
            -o-transform: rotate(140deg);
            transform: rotate(140deg);
        }

        ul#quick-entries-list{
            display: inline-block;
            list-style: none;
            margin: 0;
            position: absolute;
        }
        ul#quick-entries-list li{
            display: inline-block;
            width: 40px;
            height: 40px;
            margin: 0;
            padding: 0;
            overflow: hidden;
            border: 1px solid;
            border-radius: 50%;
            position: absolute;
            list-style: none;
        }
        ul#quick-entries-list li a{
            display: inline-block;
            width: 80%;
            height: 80%;
            margin: 0;
            padding: 0;
            list-style: none;
            position: absolute;
            top: 30%;
            left: 10%;

            text-decoration: none;
            color: #666;
        }

        /*@ul-top: 40px;*/
        ul#quick-entries-list li:first-child{
            top: 40px;
            /*top: @ul-top;*/
            left: 36px;
        }
        ul#quick-entries-list li:nth-child(2){
            top: 85px;
            left: 10px;
        }
        ul#quick-entries-list li:nth-child(3){
            top: 135px;
            left: 0px;
        }
        ul#quick-entries-list li:nth-child(4){
            top: 185px;
            left: 13px;
        }
        ul#quick-entries-list li:nth-child(5){
            top: 225px;
            left: 43px;
        }
        ul#quick-entries-list li:nth-child(6){
            top: 250px;
            left: 85px;
        }
    </style>
</head>
<body>
    <div class="border">
        <div id="quick-start-btn">穿越门</div>
        <div class="content" id="content">
            <ul id="quick-entries-list">
                <li><a href="">GamerSky</a></li>
                <li><a href="">4Chan</a></li>
                <li><a href="">ACFun</a></li>
                <li><a href="">Baidu</a></li>
                <li><a href="">Google</a></li>
                <li><a href="">LinuxIDC</a></li>
            </ul>
        </div>
    </div>

    <script type="text/javascript" charset="utf-8">
        window.onload = function(){
            var btn = document.getElementById("quick-start-btn");
            btn.addEventListener("click",function(e){
                var divContent = document.getElementById("content");
                if(divContent.hasAttribute("style")){
                    divContent.removeAttribute("style");
                }else{
                    divContent.style.webkitTransform = "rotate(0deg)";
                    divContent.style.mozTransform = "rotate(0deg)";
                    divContent.style.msTransform = "rotate(0deg)";
                    divContent.style.oTransform = "rotate(0deg)";
                    divContent.style.transform = "rotate(0deg)";
                }
            });
        }
    </script>
</body>
</html>